<template>
  <div class="allSize">
    <!-- :style="{ width: width + 'px' }" -->
    <div :style="{ width: width + 'px' }">
      <div>
        <HeadMess></HeadMess>
      </div>
      <div><Carousel></Carousel></div>

      <el-container>
        <el-header>
          <PageButton></PageButton>
        </el-header>
        <el-main>
          <ViewList></ViewList>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import Carousel from "@/components/Carousel.vue";
import PageButton from "@/components/PageButton.vue";
import ViewList from "@/components/ViewList.vue";
import HeadMess from "@/components/HeadMess.vue";
export default {
  data() {
    return {
      width: 0,
    };
  },
  components: {
    Carousel,
    PageButton,
    ViewList,
    HeadMess,
  },
  mounted() {
    this.setWidth();
    window.addEventListener("resize", this.setWidth);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setWidth);
  },
  methods: {
    setWidth() {
      this.width = window.innerWidth;
    },
  },
};
</script>
<style scoped>
.el-header,
.el-footer {
  /* background-color: #e088bf;
  color: #0f0f0f; */
  text-align: left;
  /* line-height: 60px; */
  margin-left: 0px;
  width: 100%;
  height: auto;
}
.el-main {
  margin-top: 8px;
  text-align: center;
  margin-left: 8px;
}
.allSize {
  background-color: rgb(243, 220, 220);
  display: grid;
  place-items: center;
  width: 99%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>
